<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import ImageUpload from '@/components/ImageUpload.vue'
import ImageSelecter from '@/components/ImageSelecter.vue'
const store = useStore()
const pageName = 'Dashboard'//JSON.parse(sessionStorage.getItem('vuex'))

// const perms = store.getters['auth/checkPerms']
// Object.keys(perms).forEach(item=>{
//   console.info('--->' + item)
// })
let student = { id: 1, name: '小经', age: 99 }

const state = reactive({
  arr: {},
  images: '',
  //images: [],
  list: [
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
    { id: 4, title: 'Item 4' },
    { id: 5, title: 'Item 5' }
  ],
  dragIndex: null
})

const showInfo = () => {
  alert(JSON.stringify({ ...student, name: '李空', age: 66 }))
  console.dir(window)
}
const checked = ref(false)
// 切换主题回调
const change = (value) => {
  // 如果开关打开，就切换为绿色主题，否则默认黄色主题
  //checked.value = !checked.value
  if (value) {
    console.log('已切换为绿色主题')
  } else {
    console.log('已切换为默认主题')
  }
}

const pushItem =(name) => {
  const item = {id: 93, name: [name]}
  state.arr['20'] =  item
}

const clearData = () =>{
  console.info(state.arr)
  state.arr['20'].name =[]
}
// 权限
const primary_key ='VIEW'

const onSelectedImage = (arr)=>{
  alert(JSON.stringify(arr))
}

const dragStart = (index) => {
  state.dragIndex = index
}

const dragEnter = (index) => {
  if (state.dragIndex !== null && state.dragIndex !== index) {
    // 计算拖拽元素和目标元素的位置关系
    const dragItem = state.list[state.dragIndex]
    //const targetItem = state.list[index]
    const isAfter = state.dragIndex < index
 
    // 更新列表顺序
    state.list.splice(state.dragIndex, 1)
    state.list.splice(isAfter ? index - 1 : index, 0, dragItem)
    state.dragIndex = isAfter ? index : index - 1
  }
}
 
let dragIndex = 0
 
function dragstart2(e, index) {
  e.stopPropagation()
  dragIndex = index
  setTimeout(() => {
    e.target.classList.add('moveing')
  }, 0)
}
function dragenter2(e, index) {
  e.preventDefault()
  // 拖拽到原位置时不触发
  if (dragIndex !== index) {
    const source = state.list[dragIndex]
    state.list.splice(dragIndex, 1)
    state.list.splice(index, 0, source)
 
    // 更新节点位置
    dragIndex = index
  }
}
function dragover2(e) {
  e.preventDefault()
  e.dataTransfer.dropEffect = 'move'
}
function dragend2(e) {
  e.target.classList.remove('moveing')
}
</script>
<template>
  <div>
    <a-row :gutter="[32,32]" style="margin-top: 10px;">
      <a-col :span="6">
        <a-card bordered hoverable>
          今天-销售额<br>
          99999<br>
          昨日9898元 环比-98.96%<br>
          本月-销售额9898元
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card bordered hoverable>
          今天-用户访问量<br>
          99999<br>
          昨日9898 环比-98.96%<br>
          本月-访问量9898元
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card bordered hoverable>
          今天-订单量<br>
          99999<br>
          昨日9898 环比-98.96%<br>
          本月-订单量9898元
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card bordered hoverable>
          今天-新增用户<br>
          99999<br>
          昨日9898 环比-98.96%<br>
          本月-新增用户9898元
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[32,32]" style="margin-top: 20px;">
      <a-col :span="3">
        <a-card bordered hoverable>用户管理</a-card>
      </a-col>
      <a-col :span="3">
        <a-card bordered hoverable>系统设置</a-card>
      </a-col>
      <a-col :span="3">
        <a-card bordered hoverable>商品</a-card>
      </a-col>
      <a-col :span="3">
        <a-card bordered hoverable>订单管理</a-card>
      </a-col>
      <a-col :span="3">
        <a-card bordered hoverable>短信配置</a-card>
      </a-col>
      <a-col :span="3">
        <a-card bordered hoverable>文章管理</a-card>
      </a-col>
      <a-col :span="3">
        <a-card bordered hoverable>分销管理</a-card>
      </a-col>
      <a-col :span="3">
        <a-card bordered hoverable>优惠券</a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[32,32]" style="margin-top: 20px;">
      <a-col :span="24">
        <a-card bordered hoverable>订单图（曲线图）</a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[32,32]" style="margin-top: 20px;">
      <a-col :span="18">
        <a-card bordered hoverable>用户（曲线图）</a-card>
      </a-col>
      <a-col :span="6">
        <a-card bordered hoverable>
          购买用户统计（饼图）
          未消费用户、消费一次用户、留在客户、回流客户
        </a-card>
      </a-col>
    </a-row>
    {{ pageName }}  == {{ state.arr }} ==>>{{ $store.state.auth.USER_INFO }}
    <br>
    
    <!-- <a-button v-perm:perm="`${primary_key}::'ADD'`" type="primary">权限Perm</a-button> -->
    <!-- <a-button v-perm:Goods="[primary_key, 'ADD']" type="primary">权限ROLE</a-button> -->
    <a-button v-perm:goods="[primary_key, 'ADD']" type="primary">权限ROLE</a-button>
    <a-button type="primary" @click="showInfo">Hello HelloWorld</a-button>
    <div>
      <a-button type="primary" @click="pushItem('Primary')">primary Button </a-button>
      <a-button @click="clearData">Default Button </a-button>
      <a-button type="dashed">dashed Button </a-button>
      <a-button type="text">text Button </a-button>
      <a-button type="link">dashed Button </a-button>
      <a-switch />
      <!-- 开关切换主题 -->
      !{{ store.getters['auth/checkPerms'] }} ==
      <a-switch
        v-model:checked="checked"
        checked-children="绿"
        un-checked-children="黄"
        @change="change"
      />
      <hr>
      {{ state.images }}
      <hr>
      <image-selecter v-model="state.images" />
      <hr>
      <div v-for="i in 2" :key="i" @selected="onSelectedImage">
        {{ i }}<image-upload />
      </div>
      <hr>
      <div class="box">
        <h2>线性流动</h2>
      </div>
      <hr>
      <ul>
        <li
          v-for="(item, index) in state.list" :key="item.id" 
          :draggable="true" 
          @dragstart="dragStart(index)" 
          @dragenter.prevent 
          @dragover.prevent 
          @dragenter="dragEnter(index)">
          {{ item.title }}
        </li>
      </ul>
      <hr>
      <TransitionGroup name="list" tag="div" class="container">
        <div
          v-for="(item, i) in state.list"
          :key="item.id"
          class="item"
          :draggable="true"
          @dragstart="dragstart2($event, i)"
          @dragenter="dragenter2($event, i)"
          @dragend="dragend2"
          @dragover="dragover2"
        >
          {{ item.title }}
        </div>
      </TransitionGroup>
    </div>
  </div>
</template>
<style lang="less" scoped>
.box{
  position: relative;
  width:180px;
  height:250px;
  background: rgba(0, 0, 0, 0.288);
  border-radius: 20px;
  display: flex;
  justify-content:center;
  align-items: center;
  overflow: hidden;
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
  &::before{
    content:'';
    position:absolute;
    width: 100px;
    height: 120%; 
    background:linear-gradient(#f1d950,#f811c6);
    animation:lineRoll 3s linear infinite;
  }
  &:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 阴影效果*/
  }
  &::after{
    content: '';
    position: absolute;
    right:4px; top:4px;left:4px; bottom:4px;
    border-radius: 20px;
    background: #87eed8;
  }
  h2{
    text-align: center;
    color:white;
    font-size:3em;
    text-shadow:2px 2px rgb(32, 172, 63);
    z-index:1;
  }
}
@keyframes lineRoll{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);

    }
    to{
        transform: rotate(360deg);
    }
}

.item {
  width: 100px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(135, 207, 235, 0.699);
  text-align: center;
  margin: 10px;
  color: #fff;
  font-size: 18px;
}
 
.container {
  position: relative;
  padding: 0;
  display: flex;
  flex-wrap: row wrap;
}
 
.moveing {
  opacity: 0;
}
/* 对移动中的元素应用的过渡 */
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.2s ease;
}
</style>